<template>
	<view class="container">
		<map 
		id="map1"
		style="width: 100%; height: 1600rpx;" 
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="markers"
		show-location="true"
		></map>
		<view class="map">
			<view class="bottom">
				<view class="text">
					<text style="font-weight: 900;">景区列表</text>
					<text @tap="PagetoYouLan">游览线路</text>
					<text @tap="PagetoZhouBian">周边服务</text>
				</view>
				<view class="botom-list">
					<view class="jinru" @tap="toSousuoPage">
						<image src="../../static/点.png" mode=""></image>
						<text>请输入景点名称</text>
					</view>
				</view>
				<view class="list" v-for="(item,index) in text" :key="index">
					<view class="left-image">
						<image :src="item.src" mode=""></image>
					</view>
					<view class="right-text">
						<view class="textbig">
							<view class="top">
								<view class="mianfei">
									<text style="font-size: 20rpx; color: white;">{{item.mian}}</text>
								</view>
								<view class="hai">
									<text style="font-size: 20rpx;">{{item.hai}}</text>
								</view>
							</view>
							<view class="juli">
								<text style="font-size: 20rpx;">距离0.2km</text>
							</view>
						</view>
						<view class="right-image">
							<image src="../../static/音乐列表.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				text: [
					{
					src: '../../static/图片 (2).png',
					mian: '免费',
					hai: '海之神岛屿'
					},
					{
					src: '../../static/图片 (2).png',
					mian: '免费',
					hai: '海之神岛屿'
					},
					{
					src: '../../static/图片 (2).png',
					mian: '免费',
					hai: '海之神岛屿'
					},
				],
				// 经纬度是想去位置的
				markers: [{
					id: 1,
					width: 50,
					height: 50,
					iconpath: '../../static/定位.png',
					latitude: 0,
					longitude: 0,
				}]
			}
		},
		// 页面初次渲染完成
		onReady() {
			this.mapCtx = wx.createMapContext('map1')
		},
		methods:{
			PagetoYouLan(){
				let plugin = requirePlugin('routePlan');
				let key = 'VVSBZ-U2X3Z-TMIXY-Z6BF2-62RBT-ENBTZ';  //使用在腾讯位置服务申请的key
				let referer = 'ccc';   //调用插件的app的名称
				let endPoint = JSON.stringify({  //终点
				    'name': '福建省厦门市集美区鳌园路22号',
				    'latitude': 24.565092,
				    'longitude': 118.107467
				});
				wx.navigateTo({
				    url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			}
		},
		onLoad(option) {
			this.markers[0].latitude = parseFloat(option.lat)
			this.markers[0].longitude = parseFloat(option.lon)
			uni.getLocation({
				type: 'gcj02',
				success: res=> {
					this.latitude=res.latitude
					this.longitude=res.longitude
					
					// 使用地图实例中的方法，让我的位置和标记的位置在同一个区域显示
					this.mapCtx.includePoints({
						padding: [240, 50, 240, 50],
						points: [
							// 第一个我的位置
							{
								latitude: this.latitude,
								longitude: this.longitude
							},
							// 标记的位置
							{
								latitude: this.markers[0].latitude,
								longitude: this.markers[0].longitude
							}
						]
					})
				}
			});
		}
	}
</script>

<style lang="scss">
	.container {
		.map {
			.bottom {
				.right-text {
					.right-image{
						image{
							margin-top: 20rpx;
							width: 60rpx;
							height: 60rpx;
						}
					}
					.textbig {
						.juli{
							margin-left: 15rpx;
						}
						.top {
							.mianfei {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 60rpx;
								height: 30rpx;
								background-color: black;
								border-radius: 10rpx;
							}

							.hai {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 120rpx;
								height: 30rpx;
								border-radius: 10rpx;
							}
							margin-top: 10rpx;
							margin-left: 15rpx;
							width: 170rpx;
							display: flex;
							justify-content: space-between;
						}
					}
					width: 475rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #f5f5f5;
					border-top-right-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
				}

				.list {
					.left-image {
						width: 100rpx;
						height: 100rpx;
						background-color: gray;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 30rpx;
						border-top-left-radius: 30rpx;
						border-bottom-left-radius: 30rpx;

						image {
							width: 80rpx;
							height: 60rpx;
						}
					}

					display: flex;
					justify-content: space-between;
					width: 560rpx;
					height: 100rpx;
					margin-top: 20rpx;
					
				}

				.botom-list {
					.jinru {
						image {
							width: 70rpx;
							height: 70rpx;
						}

						display: flex;
						align-items: center;
						width: 540rpx;
						height: 100rpx;
						background-color: #f0f2f4;
						border-radius: 40rpx;
						margin-top: 20rpx;
					}

					display: flex;
					justify-content: center;
					width: 600rpx;
					height: 150rpx;
					margin-top: 30rpx;
				}

				.text {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-around;
				}

				background-color: #fff;
				width: 600rpx;
				height: 700rpx;
				position: fixed;
				bottom: 0;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
			}

			display: flex;
			justify-content: center;
			background-color: gray;
			height: 100vh;
			width: 100vw;
		}
	}
</style>